<!-- components/reconciliation/OrderInfoCell.vue -->
<template>
  <div class="order-info-cell">
    <div class="order-id">
      <el-tag type="primary" size="small">订单</el-tag>
      <span class="order-number">{{ order.platformOrderId }}</span>
    </div>
    <div class="order-details">
      <div class="customer-name">{{ order.customerName }}</div>
      <div class="order-amount">¥{{ order.orderAmount.toLocaleString() }}</div>
      <div class="order-date">{{ formatDate(order.orderDate) }}</div>
    </div>
    <div class="invoice-status">
      <el-tag 
        :type="invoiceStatusType"
        size="small"
      >
        {{ invoiceStatusText }}
      </el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { ReconciliationResult } from '@/types/reconciliation'

const props = defineProps<{
  order: ReconciliationResult['orderInfo']
}>()

const invoiceStatusType = computed(() => {
  switch (props.order.invoiceStatus) {
    case 'invoiced': return 'success'
    case 'pending': return 'warning'
    case 'cancelled': return 'danger'
    default: return 'info'
  }
})

const invoiceStatusText = computed(() => {
  switch (props.order.invoiceStatus) {
    case 'invoiced': return '已开票'
    case 'pending': return '待开票'
    case 'cancelled': return '已取消'
    default: return props.order.invoiceStatus
  }
})

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('zh-CN')
}
</script>

<style scoped>
.order-info-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-id {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-number {
  font-weight: 600;
  color: var(--el-color-primary);
}

.order-details {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.customer-name {
  flex: 1;
  font-weight: 500;
}

.order-amount {
  font-weight: 600;
  color: var(--el-color-success);
  margin: 0 8px;
}

.order-date {
  color: var(--el-text-color-secondary);
}

.invoice-status {
  align-self: flex-start;
}
</style>